<template>
  <a-modal title-align="start" title="批量设置关键词" :mask-closable="false" v-model:visible="showvisible" @cancel="showvisible = false" :width="600">
    <div>
      <a-radio-group v-model="form.type">
        <a-radio value="A">替换</a-radio>
        <a-radio value="B">新增</a-radio>
        <a-radio value="C">覆盖</a-radio>
      </a-radio-group>
    </div>
    <div v-if="form.type === 'A'">
      <div class="mt10" style="width: 100%">
        <a-space>
          <div class="required">查找关键词：</div>
          <a-select style="width: 450px" allow-search allow-clear placeholder="请选择" v-model="form.searchText">
            <a-option v-for="(item, index) of tagList" :key="index" :value="item.id">{{ $extract(item, 'dataFromRestApi.name') }}</a-option>
          </a-select>
        </a-space>
      </div>
      <div class="mt10" style="width: 100%">
        <a-space>
          <div class="required">替换关键词：</div>
          <a-select style="width: 450px" allow-search allow-clear placeholder="请选择" v-model="form.replaceText">
            <a-option v-for="(item, index) of tagList" :key="index" :value="item.id">{{ $extract(item, 'dataFromRestApi.name') }}</a-option>
          </a-select>
        </a-space>
      </div>
    </div>

    <div v-if="form.type === 'B'">
      <div class="mt10" style="width: 100%">
        <a-space>
          <div class="required">添加关键词：</div>
          <div>
            <div class="common-text">在现有基础上新增以下关键词</div>
            <a-select style="width: 450px" multiple allow-search allow-clear placeholder="请选择" v-model="form.addKeywordIds">
              <a-option v-for="(item, index) of tagList" :key="index" :value="item.id">{{ $extract(item, 'dataFromRestApi.name') }}</a-option>
            </a-select>
          </div>
        </a-space>
      </div>
    </div>

    <div v-if="form.type === 'C'">
      <div class="mt10" style="width: 100%">
        <a-space>
          <div class="required">关键词：</div>
          <div>
            <div class="common-text">将以下关键词整体覆盖到已选中商品上</div>
            <a-select style="width: 450px" multiple allow-search allow-clear placeholder="请选择" v-model="form.coverKeywordIds">
              <a-option v-for="(item, index) of tagList" :key="index" :value="item.id">{{ $extract(item, 'dataFromRestApi.name') }}</a-option>
            </a-select>
          </div>
        </a-space>
      </div>
    </div>

    <template #footer class="modal-footer">
      <a-button @click="showvisible = false">取消</a-button>
      <a-button type="primary" @click="submit">确定</a-button>
    </template>
  </a-modal>
</template>

<script lang="ts" setup>
  import { Message } from '@arco-design/web-vue'
  import { onMounted, ref, computed } from 'vue'
  import { tagRollPage, batchProduct } from '@/api/product'
  import _ from 'lodash-es'
  let props = defineProps(['modelValue', 'type', 'ids', 'shopId'])
  let emits = defineEmits(['save', 'update:modelValue'])
  let showvisible = computed({
    get() {
      return props.modelValue
    },
    set(val) {
      emits('update:modelValue', val)
    },
  })

  let form = ref({
    type: 'A',
    searchText: '',
    replaceText: '',
    addKeywordIds: [],
    coverKeywordIds: [],
  })

  let tagList: any = ref([])

  const submit = async () => {
    let arr = _.cloneDeep(props.ids)
    if (form.value.type == 'A') {
      if (form.value.searchText == '') {
        return Message.error('请选择要查找的关键词')
      }
      if (form.value.replaceText == '') {
        return Message.error('请选择要替换的关键词')
      }
      let obj1 = tagList.value.find((item: any) => item.id == form.value.searchText)
      let obj2 = tagList.value.find((item: any) => item.id == form.value.replaceText)
      console.log(obj1, obj2)
      arr.forEach((e: any) => {
        if (e.tags[0]) {
          e.tags.forEach((el: any) => {
            if (el.name == obj1.dataFromRestApi.name) {
              el.name = obj2.dataFromRestApi.name
              el.slug = obj2.dataFromRestApi.slug
            }
          })
        }
      })
    }

    if (form.value.type == 'B') {
      if (!form.value.addKeywordIds[0]) return Message.error('请选择要添加的关键词')

      let addArrList: any = []
      form.value.addKeywordIds.forEach((e: any) => {
        let obj = tagList.value.find((item: any) => item.id == e)
        addArrList.push({ name: obj.dataFromRestApi.name, slug: obj.dataFromRestApi.slug })
      })
      arr.forEach((e: any) => {
        e.tags = [...e.tags, ...addArrList]
      })
    }
    if (form.value.type == 'C') {
      if (!form.value.coverKeywordIds[0]) return Message.error('请选择要覆盖的关键词')
      let addArrList: any = []
      form.value.coverKeywordIds.forEach((e: any) => {
        let obj = tagList.value.find((item: any) => item.id == e)
        addArrList.push({ name: obj.dataFromRestApi.name, slug: obj.dataFromRestApi.slug })
      })
      arr.forEach((e: any) => {
        e.tags = addArrList
      })
    }
    let params: any = {
      param: {
        update: [],
      },
      shopId: props.shopId,
    }

    arr.forEach((e: any) => {
      let obj = {
        id: e.id,
        tags: e.tags,
      }
      params.param.update.push(obj)
    })

    // const res: any = await batchProduct(params)
    let res: any = null

    res = await batchProduct(params)
    if (res) {
      Message.success('修改成功')
      emits('save')
      showvisible.value = false
    }
  }

  const getTagList = async () => {
    let params = {
      shopIdList: [props.shopId],
      pageSize: 999999,
    }
    const res: any = await tagRollPage(params)
    tagList.value = res.data?.list || []
  }

  onMounted(() => {
    console.log(props.ids)

    getTagList()
  })
</script>

<style lang="less" scoped></style>
